<template>
  <div id="ActivityDialog">
    <el-dialog title="添加活动" width="900px" :visible.sync="show">
      <vj-form @submit="onSubmit" @close="show=false" hide-reset :style-config="{labelWidth:'160px'}"
               :slot-idx="cfgList.length"
               :loading="loading" class="vj-form" :cfg-list="cfgList"
               :form-data.sync="formData">
        <template v-if="+acttype===1" slot="form-item">
          <el-form-item required label="报名表填写设置">
            <vj-table @switch="onSwitch" :style-config="{size:'small',height:'300px'}" :cfg-list="tableCfg"
                      :pagination="false"
                      :table-data="tableData">
              <template #action="{idx}">
                <text-button text="添加" @click="tableData.splice(idx+1,0,tmpl())"/>
                <text-button text="删除" @click="tableData.splice(idx,1)"/>
              </template>
            </vj-table>
          </el-form-item>
        </template>
      </vj-form>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue, {ComponentOptions, VueConstructor} from "vue"
import Component from 'vue-class-component'
import {GameFM, ACTIVITY_FM, ACTIVITY_LINK_FM} from "@/config/form";
import {hookSubmit} from "vijay-util";
import {Mixins, Prop} from "vue-property-decorator";
import {FormMixin} from "@/plugins/mixins/form";
import {ActivityFormTB} from "@/config/table";
import TextButton from "@/components/basic/text-button.vue";
import {requestByGet, requestByPost, requestByPut} from "@/utils/request";

const defaultTb = () => [{ismust: true, type: "1", name: "姓名", prompt: "请输入", disabled: true}, {
  ismust: true,
  type: "1",
  name: "手机",
  prompt: "请输入",
  disabled: true
}]
@Component({
  components: {TextButton}
})
export default class ActivityDialog extends Mixins(FormMixin) implements ComponentOptions<Vue> {
  name = "ActivityDialog"
  acttype = 0;
  show = false;
  tableCfg = ActivityFormTB;
  formData = {};
  tableData = defaultTb();
  editId = null;
  tmpl = () => ({ismust: true, type: "1", name: "", prompt: "请输入"});

  async onSwitch(val, name, row) {
    row[name] = val;
  }

  get cfgList() {
    return +this.acttype === 2 ? ACTIVITY_LINK_FM : ACTIVITY_FM
  }

  @hookSubmit()
  async onSubmit() {
    const requestFn = this.editId ? requestByPut : requestByPost;
    const params = Object.assign({qqcExercisedetailsList: this.tableData, acttype: this.acttype}, this.formData);
    await requestFn(`qqc/qqcExercise/${this.editId ? 'edit' : 'add'}`, {...params, id: this.editId});
    this.$message.success("操作成功！");
    this.show = false;
    this.$emit('refresh')
  }

  async open(acttype, formData, id) {
    this.tableData = defaultTb();
    if (id) {
      const {qqcExercisedetailsList = [], ...data} = await requestByGet(`qqc/qqcExercise/queryById`, {id});
      formData = data;
      this.tableData = qqcExercisedetailsList;
    }
    this.editId = id;
    this.formData = formData;
    this.show = true;
    this.acttype = acttype;
  }
}
</script>

<style scoped lang="scss">
@import "~assets/common.scss";

#ActivityDialog {
}
</style>
